<template>
  <div class="user-profile-container">
    <!-- 导航 -->
    <van-nav-bar class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="onClickLeft" />
    <!-- /导航 -->
    <!-- 头像 -->
    <input type="file"
      hidden
      ref="file"
      @change="onChange" />
    <van-cell title="头像"
      is-link
      value="内容"
      @click="$refs.file.click()">
      <van-image class="avatar"
        round
        fit="cover"
        :src="userInfo.photo" />
    </van-cell>
    <!-- /头像 -->
    <!-- 昵称 -->
    <van-cell title="昵称"
      is-link
      @click="isShowNick = true"
      :value="userInfo.name">

    </van-cell>
    <!-- 性别 -->
    <van-cell title="性别"
      is-link
      @click="isShowGender = true"
      :value="userInfo.gender === 0 ? '男' : '女' " />
    <!-- 生日 -->
    <van-cell title="生日"
      is-link
      @click="isShowBirthday = true"
      :value="userInfo.birthday" />

    <!-- 弹出层--昵称 -->
    <van-popup v-model="isShowNick"
      position="bottom"
      :style="{ height: '100%' }">
      <NickName @close='isShowNick = false'
        v-if="isShowNick"
        v-model="userInfo.name" />
    </van-popup>
    <!-- 弹出层--性别 -->
    <van-popup v-model="isShowGender"
      position="bottom">
      <SetGender @close='isShowGender = false'
        v-if="isShowGender"
        v-model="userInfo.gender" />
    </van-popup>
    <!-- 弹出层--生日 -->
    <van-popup v-model="isShowBirthday"
      position="bottom">
      <SetBirthday @close='isShowBirthday = false'
        v-if="isShowBirthday"
        v-model="userInfo.birthday" />
    </van-popup>
    <!-- 弹出层--头像 -->
    <van-popup v-model="isShowPhoto"
      position="top"
      style="height:100%">
      <SetAvatar @close='isShowPhoto = false'
        :img="imgSrc"
        @update-photo="userInfo.photo = $event" />

    </van-popup>
  </div>
</template>

<script>
import { getUserProfile } from '@/api/user'

import NickName from './children-components/NickName'
import SetGender from './children-components/SetGender'
import SetBirthday from './children-components/SetBirthday'
import SetAvatar from './children-components/SetAvatar'

export default {
  name: 'UserProfile',
  components: {
    NickName,
    SetGender,
    SetBirthday,
    SetAvatar
  },
  props: {},
  data () {
    return {
      userInfo: {}, // 用户个人信息
      isShowNick: false,
      isShowGender: false,
      isShowBirthday: false,
      isShowPhoto: false,
      imgSrc: null // 预览的图片
    }
  },
  created () {
    this.initUserProfile()
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    // 获取用户信息
    async initUserProfile () {
      try {
        const { data: res } = await getUserProfile()
        // console.log(res.data)
        this.userInfo = res.data
      } catch (err) {
        console.log('获取用户信息失败', err)
      }
    },
    onChange () {
      // 获取文章对象
      const file = this.$refs.file.files[0]
      // 基于文章对象获取 blob 数据
      const blob = window.URL.createObjectURL(file)
      console.log(blob)
      this.imgSrc = blob
      // 打开弹层
      this.isShowPhoto = true
      // file-input 如果选了同一个文件不会触发 change 事件
      // 解决办法就是每次使用完毕后，把它的 value 清空
      this.$refs.file.value = ''
    }
  }
}
</script>

<style scoped lang="less">
.page-nav-bar {
  background-color: #3296fa;
  /deep/ .van-nav-bar__title,
  /deep/ .van-icon {
    color: #fff;
  }
}
.avatar {
  width: 60px;
  height: 60px;
}
.van-popup {
  background-color: #f5f7f9;
}
</style>
